<template>
  <div class="supplier">
    <el-card class="cardStyle">
      <div class="boss-title">会员设置-店铺列表</div>
      <el-form class="formStyle" inline ref="form">
        <el-form-item label="供应商名称">
          <el-input class="boss_input" v-model="supplierData.search.supplierName"
                    placeholder="请输入供应商名称"></el-input>
        </el-form-item>

        <el-form-item>
          <Button label="搜索" type="primary" @click="onSearchClick" />
          <Button label="重置" @click="onResetClick" />
        </el-form-item>
      </el-form>
    </el-card>

    <div class="outerTable">
      <el-table ref="tableRef" :height="tableHeight" :data="supplierData.list" v-loading="loading">
        <el-table-column fixed="left" type="index" label="序号" width="80" />
        <el-table-column label="店铺名称" prop="supplierName" align="center" />

        <el-table-column fixed="right" label="操作" width="180">
          <template #default="{row}">
            <Link @click="onDetailClick(row)" label="设置会员折扣" :underline="false" />
          </template>
        </el-table-column>
      </el-table>
      <Pager :page="supplierData.search.page" :total="supplierData.total" :limit="supplierData.search.limit"
             :pageSizes="supplierData.search.pageSizes" @current-change="onCurrentChange" @size-change="onSizeChange" />
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import api from '@/api'
import consts from '@/consts'
import { calcTableHeight } from '@/assets/js/utils.js'
import Pager from '@/components/pager/index.vue'
import Link from '@/components/button/link.vue'
import Button from '@/components/button/button.vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const loading = ref(false)
const supplierData = reactive({
  total: 0,
  list: [],
  search: {
    supplierName: '',
    supplierAccount: '',
    page: 1,
    limit: consts.Limit,
    pageSizes: consts.PageSize
  }
})


const { tableRef, tableHeight } = calcTableHeight()

const loadData = async () => {
  loading.value = true
  const params = { ...supplierData.search }
  let { data, err } = await api.get('/medinstrument/boss/supplier/list', params)
  loading.value = false
  if (err) {
    ElMessage.error(err)
  } else {
    supplierData.list = data.list
    supplierData.total = data.count
  }
}
const onSearchClick = () => {
  supplierData.search.page = 1
  loadData()
}

const onResetClick = () => {
  supplierData.search.supplierName = ''
  loadData()
}

const onDetailClick = (row) => {
  let { href } = router.resolve({
    path: `/member/detail/${row.supplierId}`
  })
  window.open(href, '_blank')
}

// 当前页码变化
const onCurrentChange = (val) => {
  supplierData.search.page = val
  loadData()
}

// 每页显示条数变化
const onSizeChange = (val) => {
  supplierData.search.limit = val
  loadData()
}


onMounted(() => {
  loadData()
})
</script>
<style lang="scss" scoped>
.cardStyle {
  height: 118px;
  margin: 10px 0;
  display: flex;
  align-items: center;
}

.boss-title {
  font-size: 16px;
  margin-bottom: 19px;
  color: #303133;
  letter-spacing: 0;
  line-height: 30px;
  font-weight: 600;
}

.formStyle {
  margin-top: 10px;
}
</style>
